<template>
  <div class="edit-header">
    <p>自动投放</p>
  </div>
  <a-form :disabled="isDisabled" ref="formRef" style="min-width: 900px" :model="editSpCampaignInfo">
    <a-form-item label="" label-col-flex="0">
      <a-radio-group v-model="editSpCampaignInfo.autoTargetingType">
        <a-radio :value="0">设置默认竞价</a-radio>
        <a-radio :value="1">按投放组设置竞价</a-radio>
      </a-radio-group>
    </a-form-item>
    <div class="edit-con" v-if="editSpCampaignInfo.autoTargetingType === 0">
      <p style="margin-bottom: 20px">适用于您的广告组的所有关键词，除非您为特定关键词设置不同的竞价</p>
      <a-form-item field="defaultBudget" label-col-flex="90px">
        <template #label>
          <p>
            <span class="warningColor">*</span>
            <span>默认竞价：</span>
          </p>
        </template>
        <a-input-number size="small" style="width: 200px" v-model="editSpCampaignInfo.defaultBudget" placeholder="" allow-clear>
          <template #prepend>
            <a-button size="small">{{ currency }}</a-button>
          </template>
        </a-input-number>
      </a-form-item>
    </div>
    <div class="edit-con" v-if="editSpCampaignInfo.autoTargetingType === 1">
      <p style="margin-bottom: 20px">使用多种策略将您的广告与寻找您产品的购物者进行匹配</p>
      <a-form-item v-for="(item, i) in editSpCampaignInfo.targetingGroups" :key="i" :field="item.targetingGroup" label-col-flex="100px">
        <template #label>
          <a-checkbox v-model="item.checked">{{ item.name }}</a-checkbox>
        </template>
        <a-input-number size="small" style="width: 200px" v-model="item.bid" placeholder="" allow-clear>
          <template #prepend>
            <a-button size="small">{{ currency }}</a-button>
          </template>
        </a-input-number>
        <span v-if="item.checked" class="warningColor" style="margin-left: 5px">*</span>
      </a-form-item>
    </div>
  </a-form>
</template>
<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue'
  import { marketPlaceList } from '@/utils/globalData'
  import { Message } from '@arco-design/web-vue'
  import { DraftFinishStep } from '../../types'
  const props = defineProps({
    darftInfo: {
      type: Object,
      default: () => {},
    },
    shop: {
      type: Object,
      default: () => {},
    },
  })
  onMounted(() => {
    setDefaultData()
  })
  const editSpCampaignInfo = ref<any>({})
  const formRef = ref()
  const currency = computed(() => {
    let marketplaceId = props.shop?.marketplaceId
    return marketplaceId ? marketPlaceList[marketplaceId]?.currency : 'USD'
  })
  // 根据当前流程节点判断是否可编辑
  let isDisabled = computed(() => {
    let handlerFlow = props.darftInfo?.handlerFlow || 'INIT'
    let level = DraftFinishStep[handlerFlow]
    return Number(level) > 8 ? true : false
  })
  // 设置初始化信息
  function setDefaultData() {
    editSpCampaignInfo.value.autoTargetingType = props.darftInfo?.autoTargetingType || 0
    editSpCampaignInfo.value.defaultBudget = props.darftInfo?.defaultBudget
    let targetingGroups = [
      { checked: true, name: '紧密匹配', bid: null, targetingGroup: 'QUERY_HIGH_REL_MATCHES' },
      { checked: true, name: '宽泛匹配', bid: null, targetingGroup: 'QUERY_BROAD_REL_MATCHES' },
      { checked: true, name: '关联商品', bid: null, targetingGroup: 'ASIN_ACCESSORY_RELATED' },
      { checked: true, name: '同类商品', bid: null, targetingGroup: 'ASIN_SUBSTITUTE_RELATED' },
    ]
    // 有草稿箱
    if (props.darftInfo?.autoTargetingType == 1) {
      let darftTargetingGroups = props.darftInfo?.targetingGroups || []
      editSpCampaignInfo.value.targetingGroups = targetingGroups.map((el: any) => {
        return {
          ...el,
          checked: darftTargetingGroups.some((item: any) => item.targetingGroup == el.targetingGroup),
          bid: darftTargetingGroups.find((item: any) => item.targetingGroup == el.targetingGroup)?.bid,
        }
      })
    } else {
      editSpCampaignInfo.value.targetingGroups = targetingGroups
    }
  }

  // 校验信息
  async function validateData() {
    if (editSpCampaignInfo.value.autoTargetingType === 0 && !(editSpCampaignInfo.value.defaultBudget || editSpCampaignInfo.value.defaultBudget === 0)) {
      formRef.value.setFields({
        defaultBudget: {
          status: 'error',
          message: '请输入竞价',
        },
      })
      return false
    }
    if (editSpCampaignInfo.value.autoTargetingType === 1) {
      let checkeds = editSpCampaignInfo.value.targetingGroups.filter((el: any) => el.checked)
      if (!checkeds.length) {
        Message.error('请最少选择一种策略')
        return
      }
      let validInfo = {}
      checkeds.forEach((el: any) => {
        if (!(el.bid || el.bid === 0))
          validInfo[el.targetingGroup] = {
            status: 'error',
            message: '请输入竞价',
          }
      })
      if (Object.keys(validInfo).length) {
        formRef.value.setFields(validInfo)
        return false
      }
    }
    return true
  }
  // 设置需要创建的数据
  function setCreateData() {
    if (editSpCampaignInfo.value.autoTargetingType === 0) {
      return {
        autoTargetingType: 0,
        defaultBudget: editSpCampaignInfo.value.defaultBudget,
      }
    } else {
      let targetingGroups = editSpCampaignInfo.value.targetingGroups.filter((el: any) => el.checked)
      return {
        autoTargetingType: 1,
        targetingGroups: targetingGroups.map((el: any) => {
          return {
            bid: el.bid,
            targetingGroup: el.targetingGroup,
          }
        }),
      }
    }
  }
  defineExpose({ validateData, setCreateData })
</script>
<style lang="less" scoped>
  .edit-header {
    background-color: var(--color-fill-2) !important;
    border-left: 2px solid rgb(var(--primary-6));
    line-height: 32px;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 20px;
  }
  .edit-con {
    margin-left: 40px;
  }
  :deep(.arco-input-prepend) {
    padding: 0;
  }
</style>
